<script setup lang="ts">
import { PropType } from "vue";
import { DEFAULT_FIELD_NAMES } from "./define";
import type { FieldNamesProp } from "./define";

defineOptions({ name: "WebxMenuSub" });
defineProps({
  // 当前节点信息
  menuInfo: { type: Object, default: () => ({}) },
  // 字段映射
  fieldNames: { type: Object as PropType<FieldNamesProp>, default: () => DEFAULT_FIELD_NAMES },
  // 展开收缩状态 false(展开) true(收缩)
  collapsed: { type: Boolean, default: false },
  // 菜单点击执行回调
  clickMenuFn: { type: Function as PropType<(...args: any[]) => void>, default: () => null }
});
</script>

<template>
  <ASubMenu :key="menuInfo[fieldNames.key]">
    <template #title>
      <div class="flex items-center gap-2">
        <WebxIcon v-if="menuInfo[fieldNames.icon]" :name="menuInfo[fieldNames.icon]" />
        <div v-if="!collapsed">{{ menuInfo[fieldNames.name] }}</div>
      </div>
    </template>
    <template v-for="menu in menuInfo[fieldNames.children]">
      <!-- 一级 -->
      <template v-if="!menu[fieldNames.children] || menu[fieldNames.children].length === 0">
        <template v-if="menu[fieldNames.path]">
          <AMenuItem
            :key="menu[fieldNames.key]"
            :disabled="!menu[fieldNames.path]"
            @click="clickMenuFn(menu)"
          >
            <div class="flex items-center gap-2">
              <WebxIcon v-if="menu[fieldNames.icon]" :name="menu[fieldNames.icon]" />
              <div>{{ menu[fieldNames.name] }}</div>
            </div>
          </AMenuItem>
        </template>
      </template>
      <!-- 下级 -->
      <template v-else>
        <WebxMenuSub :menuInfo="menu" :key="menu[fieldNames.key]" :fieldNames="fieldNames" />
      </template>
    </template>
  </ASubMenu>
</template>

<style scoped lang="less"></style>
